* {
    /* 初始化 取消页面元素内外边距 */
    margin: 0;
    padding: 0;
}
body {
    background-color: #222;
    /* 弹性布局 水平、垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 100%窗口高度 */
    height: 100vh;
}
h1 {
    color: #333;
    /* 转大写 */
    text-transform: uppercase;
    font-size: 112px;
    /* 相对定位 */
    position: relative;
    &::after {
        content: 'helloworld';
        /* 颜色为透明 */
        color: transparent;
        position: absolute;
        top: 0;
        left: 0;
        background: linear-gradient(to right, #ff69b3, #fe0000, #ffa401, #ffff01, #008102, #40e1d2, #410098, #9400d4);
        /* 以文字的范围来裁剪背景图片 */
        background-clip: text;
        -webkit-background-clip: text;
        /* 执行动画（动画 时长 infinite表示无限次播放） */
        animation: light 5s infinite;
    }
}

@keyframes light {
    0% {
        clip-path: circle(100px at 0% 50%);
    }
    50% {
        clip-path: circle(100px at 100% 50%);
    }
    100% {
        clip-path: circle(100px at 0% 50%);
    }
}
